<template>
	<view class="company-list-container">
		<view class="company-item-container" v-for="(item, index) in companyList" :key="index" @tap="toCompanyDetail(item)">
			<view class="item-top">
				<image :src="companyIcon" class="icon" v-if="item.type == 2"></image>
				<image :src="projectIcon" class="icon" v-if="item.type == 1"></image>
				<view class="project-name">{{ item.name }}</view>
				<text class="right-arrow"></text>
			</view>
			<!-- <view class="link-list">
				<view class="link-container">
					<text class="person-name">项目经理：李四琦</text>
					<image :src="phoneIcon" class="phone-icon"></image>
				</view>
				<view class="link-container">
					<text>项目经理：李四琦</text>
					<image :src="phoneIcon" class="phone-icon"></image>
				</view>
				<view class="link-container">
					<text>项目经理：李四琦</text>
					<image :src="phoneIcon" class="phone-icon"></image>
				</view>
			</view> -->
			<view class="attendance-data-container">
				<view class="attendance-item-list">
					<view class="attendance-item">
						<view class="num">{{ item.attendanceCount }}</view>
						<view class="des">出勤人数</view>
					</view>
					<view class="attendance-item">
						<view class="num">{{ item.count }}</view>
						<view class="des">在岗人数</view>
					</view>
					<view class="attendance-item">
						<view class="num">{{ item.stayingCount }}</view>
						<view class="des">实时在场</view>
					</view>
				</view>
				<view class="company-list-attendance-rate-container">
					<l-circle strokeColor="#0071F7" trailColor="#D8DCE6" :current.sync="percent" :percent="handleCompute(item.attendanceRate)" canvas size="70">
						<view class="rate-container">
							<view class="rate-num">{{ handleCompute(item.attendanceRate) }}%</view>
							<view class="rate-des">出勤率</view>
						</view>
					</l-circle>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { common } from '@/pagesA/utils/common.js';
// import companyIcon from '@/pagesA/assets/image/company-icon.png';
// import phoneIcon from '@/pagesA/assets/image/phone-icon.png';
// import projectIcon from '@/pagesA/assets/image/project-icon.png';
const app = getApp();
export default {
	props: ['companyList'],
	data() {
		return {
			companyIcon: common.imgs.companyIcon,
			phoneIcon: common.imgs.phoneIcon,
			projectIcon: common.imgs.projectIcon,
			percent: 0
		};
	},
	methods: {
		handleCompute(value) {
			return value ? Number(Number(value * 100).toFixed(1)) : 0;
		},
		toCompanyDetail(item) {
			if (item.type == 1) {
				//子项目
				uni.navigateTo({
					url: '/pagesA/pages/projectSurvey/projectSurvey?projectUuid=' + item.uuid
				});
			} else {
				//普通项目
				uni.navigateTo({
					url: `/pagesA/pages/projectSurvey/companyDetail?organizationUuid=${item.uuid}&projectUuid=${this.projectUuid}`
				});
			}
		}
	}
};
</script>

<style>
.company-list-container {
	margin: 0 24rpx;
	padding-bottom: 24rpx;
}
.company-item-container {
	background-color: #fff;
	padding: 24rpx;
	border-radius: 24rpx;
	margin-bottom: 24rpx;
}
.company-item-container:last-child {
	margin-bottom: 0;
}
.company-item-container .item-top {
	display: flex;
	align-items: center;
}
.item-top .icon {
	width: 80rpx;
	height: 80rpx;
}
.item-top .project-name {
	flex: 1;
	word-break: break-all;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #1e253f;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0 16rpx;
}
.item-top .right-arrow {
	width: 12rpx;
	height: 12rpx;
	border-right: 2rpx solid #767a87;
	border-bottom: 2rpx solid #767a87;
	transform: rotate(-45deg);
}
.link-list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24rpx;
	flex-wrap: wrap;
}
.link-list .link-container {
	width: calc(100% / 2);
	display: flex;
	align-items: center;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
	margin-bottom: 16rpx;
	overflow: hidden;
}
.link-container:nth-child(even) {
	justify-content: flex-end;
}
.link-list .person-name {
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.link-list .phone-icon {
	width: 40rpx;
	height: 40rpx;
	flex-shrink: 0;
}
.attendance-data-container {
	margin-top: 24rpx;
	height: 162rpx;
	background: #f6f7fa;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
}
.attendance-item-list {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.attendance-item-list .attendance-item {
	width: calc(100% / 3);
	text-align: center;
	color: #1e253f;
}
.attendance-item .num {
	font-size: 36rpx;
	font-family: Roboto-Bold, Roboto;
	font-weight: bold;
	word-break: break-all;
}
.attendance-item .des {
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
}
.company-list-attendance-rate-container {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
	margin-left: 24rpx;
}
.rate-container .rate-num {
	font-size: 28rpx;
	font-family: Roboto-Bold, Roboto;
	font-weight: bold;
	color: #1e253f;
}
.rate-container .rate-des {
	font-size: 20rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1e253f;
}
</style>
